<template>
  <!--合同订单-->
  <div>
    <!--导航(当切换导航时要实现页面刷新，重新进行数据查询)-->
    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"  >
      <el-menu-item index="1" @click="initData(currPage, pageSize,filterValue,vagueValue,content)">全部</el-menu-item>
      <el-menu-item index="2" @click="findAllValid(currPage, pageSize)">全部有效</el-menu-item>
      <el-menu-item index="3" @click="findAllApp(currPage, pageSize)">未审批</el-menu-item>
      <el-menu-item index="4" @click="findAllRefuse(currPage, pageSize)">已否决</el-menu-item>
      <el-menu-item index="5"><a href="maintenance">维修工单</a></el-menu-item>
    </el-menu>
    <!--全部-->
    <!--2020/2/18-->
    <el-row style="margin-top: 15px">
     <!-- <span style="padding: 0 10px"><i class="font-14 el-icon-s-open"></i></span>
      <el-select v-model="allValue" value-key="id" @change="findContract(allValue)" placeholder="全部数据" style="width: 120px">
        <el-option-group v-for="group in allOptions" :key="group.label" :label="group.label">
          <el-option v-for="item in group.options" :key="item.value" :label="item.label" :value="item">
          </el-option>
        </el-option-group>
      </el-select>
      <el-select v-model="filterValue" @change="initData(currPage, pageSize,filterValue,vagueValue,content)" placeholder="全部数据" style="width: 120px">
        <el-option-group v-for="group in filterOptions" :key="group.label" :label="group.label">
          <el-option v-for="item in group.options" :key="item.value" :label="item.label" :value="item">
          </el-option>
        </el-option-group>
      </el-select>
      <span style="padding: 0 10px 0 30px"><i class="fn el-icon-message-solid"></i></span>
      <el-input v-model="content" clearable placeholder="请输入内容" style="width: 150px"></el-input>
      <el-select v-model="jhValue" placeholder="合同主题" style="width: 120px">
        <el-option v-for="item in jhOptions" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
      <el-button @click="findThemeOrClient" icon="el-icon-search" size="small" circle></el-button>-->
      <span style="padding: 0 10px"><i class="font-14 el-icon-s-open"></i></span>
      <el-select v-model="filterValue" @change="initData(currPage, pageSize,filterValue,vagueValue,content)" placeholder="全部数据" style="width: 120px">
        <el-option-group v-for="group in filterOptions" :key="group.label" :label="group.label">
          <el-option v-for="item in group.options" :key="item.value" :label="item.label" :value="item">
          </el-option>
        </el-option-group>
      </el-select>
      <span style="padding: 0 10px 0 30px"><i class="fn el-icon-message-solid"></i></span>
      <el-input v-model="content" clearable placeholder="请输入内容" clearable style="width: 150px"></el-input>
      <el-select v-model="vagueValue" @change="initData(currPage, pageSize,filterValue,vagueValue,content)" placeholder="机会主题" style="width: 120px">
        <el-option v-for="item in vagueOptions" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
      <el-button @click="initData(currPage, pageSize,filterValue,vagueValue,content)" icon="el-icon-search" size="small" circle></el-button>
    </el-row>
    <!--新建合同订单-->
    <el-row style="margin-top: 15px">
      <el-col :span="12">
        <span set-lan="html:合同订单">合同订单</span>
        <small class="text-muted font-13">共{{totalSize}}条</small>
      </el-col>
      <el-col :span="12" class="text-right">
        <el-button type="text" @click="dialogFormVisible = true">
          <el-button size="small" icon="el-icon-circle-plus-outline">新建</el-button>
        </el-button>
        <el-button type="text" @click="dialogCopy = true">
          <el-button size="small" icon="el-icon-document-copy">复制合同订单</el-button>
        </el-button>
      </el-col>
      <!--合同订单dialog-->
      <el-dialog title="合同订单" :visible.sync="dialogFormVisible" @open="openDialog" @close='closeDialog' width="60%" style="color: #333333" >
        <el-form :model="contract" ref="con" label-width="100px" :rules="rules">
        <el-row style="margin-bottom: 15px"></el-row>
          <hr style="margin-bottom: 15px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="主题:" prop="name" style="width: 830px">
                <el-input v-model="contract.contractTheme" placeholder="关于合同的主题"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="对应客户:" style="width: 830px" prop="customerByCustomerId.customerName">
                <el-input :disabled="true" v-model="contract.customerByCustomerId.customerName" placeholder="必选"></el-input>
              </el-form-item>
              <div class="form-inline" v-show="isCustomer" >
                <el-input v-model="customerValue" @input="findCustomer" size="medium" placeholder="拼音.字母.关键字" style="width: 150px"></el-input>
                <el-button @click="findCustomer" size="medium" icon="el-icon-search"></el-button>
                <el-popover placement="top" v-model="visible">
                  <div style="margin-bottom: 10px">
                    <span>查询条件:{{customerValue}}</span>
                    <span @click="closeEmp" class="cursor" style="float: right"><i class="el-icon-error"></i></span>
                  </div>
                  <ul class="cu-ul" v-if="customerList2 !== ''">
                    <li @click="choiceCustomer2(item)" v-for="item in customerList2">{{item.customerName}}</li>
                  </ul>
                  <div style="margin: 5px 0;text-align: center" v-if="customerList2 == ''">
                    <i class="el-icon-warning-outline"/>没有符合条件的客户！
                  </div>
                </el-popover>
                <el-tooltip class="item" effect="dark" content="浏览选择客户" placement="bottom">
                  <el-button @click="innerVisible(cusCurrPage,cusPageSize)" size="medium" icon="el-icon-s-operation"></el-button>
                </el-tooltip>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="对应机会:" prop="opportunityByOppId">
                <el-select v-model="contract.opportunityByOppId" value-key="oppId" placeholder="未选" style="width: 730px">
                  <el-option v-for="item in opportunityList" :key="item.oppId" :label="item.oppTheme" :value="item">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="合同订单号:" style="width: 395px">
                <el-input :disabled="true" v-model="contract.contractNo" placeholder="保存后自动生成"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="合同类型:">
                <el-select placeholder="未选"  style="width: 290px" v-model="contract.contractSort">
                  <el-option v-for="(item,index) in lxOptions" :key="index" :label="item.label" :value="item.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="总金额:" style="width: 395px">
                <el-input v-model="contract.contractTotalAmount"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="付款方式:">
                <el-select placeholder="未选"  style="width: 290px" v-model="contract.contractPaymentMethods">
                  <el-option v-for="item in pays" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="下单时间:">
                <el-date-picker  type="date" placeholder="当前日期" style="width: 296px" v-model="contract.contractStartTime" :disabled="true"></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="结束时间:" prop="contractEndTime">
                <el-date-picker  type="date" placeholder="选择日期" style="width: 290px" v-model="contract.contractEndTime"></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="客户签约人:" style="width: 370px" prop="contractCustomerSigner">
                <el-select v-model="contract.contractCustomerSigner"  placeholder="未选" style="width: 290px">
                  <el-option v-for="(item,index) in contactList" :key="index" :label="item.contactName" :value="item.contactName">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
             <!-- <el-form-item label="我方签约人:" style="width: 370px" prop="contractOurSigner">
                <el-input style="width: 290px" v-model="contract.contractOurSigner">
                </el-input>
              </el-form-item>-->
              <el-form-item label="我方签约人:" style="width: 370px" prop="employeeByEmpId.empName">
                <el-input style="width: 290px" :disabled="changeEmp" v-model="contract.employeeByEmpId.empName" >
                  <el-button @click="openEmpDialog" slot="append" icon="el-icon-search"></el-button>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="所有者:" style="width: 370px">
                <el-input :disabled="true" style="width: 296px" placeholder="boss">
                  <!--<el-button slot="append" icon="el-icon-search" ></el-button>-->
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="结款方式:">
                <el-select v-model="contract.contractMoneyMethods" placeholder="未选"  style="width: 290px">
                  <el-option v-for="item in paytimes" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="已回款金额:" style="width: 395px">
                <el-input  :disabled="true" placeholder="￥0.00" v-model="contract.contractBackAmount"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="已开票金额:" style="width: 395px">
                <el-input  :disabled="true" placeholder="￥0.00" v-model="contract.contractInvoiceAmount"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12" style="margin-left: 56px;margin-bottom: 20px">
              <span style="margin-right: 10px">状态:</span>
              <el-radio-group v-model="radio">
                <el-radio :label="1">未生效</el-radio>
                <el-radio :label="2">执行中</el-radio>
                <el-radio :label="3">结束</el-radio>
                <el-radio :label="4">意外终止</el-radio>
              </el-radio-group>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="备注:" style="width: 830px">
                <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入内容" v-model="contract.contractNote"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="正文及附件:" style="width: 830px">
                <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入内容" v-model="contract.contractBodyText"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <!--订单明细（产品）-->
          <el-row>
            <el-col>
              <el-form-item label="订单明细:" style="width: 95%">
                <el-row v-if="this.contract.contractId === 0" class="gz-style">
                  <div style="float: right">保存后方可编辑明细</div>
                </el-row>
                <el-row v-if="this.contract.contractId !== 0">
                  <el-row>
                    <el-col :span="4" :offset="12">
                      <span class="cursor" @click="openPro(contract.contractId)"><i class="el-icon-edit"></i>编辑明细</span>
                    </el-col>
                    <el-col :span="4">
                      <span class="cursor"  @click="printPdf(contract.contractId)"><i class="el-icon-printer"></i>打印单据</span>
                    </el-col>
                    <el-col :span="4">
                      <span class="cursor"><i class="el-icon-notebook-2"></i>导出word打印</span>
                    </el-col>
                  </el-row>
                  <div class="detail">
                    <el-table :data="detailList" style="width: 100%" border show-summary>
                      <el-table-column prop="productByProductId.productName" label="产品名" >
                      </el-table-column>
                      <el-table-column prop="productByProductId.productModel" label="型号" >
                      </el-table-column>
                      <el-table-column prop="productDetailCount" label="数量" >
                      </el-table-column>
                      <el-table-column prop="productDetailOutNum" label="已交付" >
                      </el-table-column>
                     <!-- <el-table-column prop="productDetailOutNum" label="未出库" >
                      </el-table-column>-->
                      <el-table-column label="未交付" >
                        <template slot-scope="scope">
                          {{scope.row.productDetailCount-scope.row.productDetailOutNum}}
                        </template>
                      </el-table-column>
                      <el-table-column prop="productDetailPrice" label="单价" >
                        <template slot-scope="scope">
                          ￥{{scope.row.productDetailPrice}}
                        </template>
                      </el-table-column>
                      <el-table-column prop="productDetailMoney" label="金额" >
                        <template slot-scope="scope">
                          ￥{{ (scope.row.productDetailMoney = scope.row.productDetailPrice *scope.row.productDetailCount)}}
                        </template>
                      </el-table-column>
                      <el-table-column prop="productDetailRemarks" label="备注" >
                      </el-table-column>
                    </el-table>
                  </div>
                </el-row>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col>
              <el-form-item label="出库情况:" style="width: 95%">
                <el-row v-if="this.contract.contractId === 0" class="gz-style">
                  <div style="float: right">保存后方可编辑明细</div>
                </el-row>
                <el-row v-if="this.contract.contractId !== 0">
                  <div class="detail">
                    <el-table :data="detailList" style="width: 100%" border show-summary>
                    </el-table>
                  </div>
                </el-row>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col>
              <el-form-item label="审批状态:" style="width:91%">
                <div v-if="this.contract.contractId !== 0">
                  <div v-if="this.contract.contractAppStatus === 0">
                    <span>待申请</span>
                    <el-tooltip class="item" effect="dark" content="待申请" placement="bottom">
                      <i class="el-icon-more font-18"></i>
                    </el-tooltip>
                  </div>
                  <div v-if="this.contract.contractAppStatus === 1">
                    <span>待审批</span>
                    <el-tooltip class="item" effect="dark" content="待审批" placement="bottom">
                      <i class="el-icon-s-opportunity font-18"></i>
                    </el-tooltip>
                  </div>
                  <div v-if="this.contract.contractAppStatus === 2">
                    <span>同意</span>
                    <el-tooltip class="item" effect="dark" content="同意" placement="bottom">
                      <i class="el-icon-circle-check font-18"></i>
                    </el-tooltip>
                    <span>审批人：{{contract.employeeByAppEmpId.empName}}</span>
                  </div>
                  <div v-if="this.contract.contractAppStatus === 3">
                    <span>否决</span>
                    <el-tooltip class="item" effect="dark" content="否决" placement="bottom">
                      <i class="el-icon-circle-close font-18"></i>
                      <span>审批人：{{contract.employeeByAppEmpId.empName}}</span>
                    </el-tooltip>
                  </div>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col>
              <el-form-item label="审批记录:" style="width:91%">
                <el-row></el-row>
                <el-row :key="index" v-for="(app,index) in approvalRecordList">
                  <div class="border-bo" >
                    <div class="font-13-bold">
                      <span>申请：</span>
                      <span class="margin-r-3">{{app.employeeByApplicantEmpId.empName}}<i class="el-icon-right"/> boss用户</span>
                      <span>{{app.approvalRecordDate}}</span>
                    </div>
                    <div class="font-13" v-if="app.employeeByApprovalEmpId !== null">
                      <span class="margin-r-3"><i class="el-icon-minus"/>{{app.employeeByApprovalEmpId.empName}}</span>
                      <span class="margin-r-3">{{app.approvalRecordTime | formatDate}}</span>
                      <span class="margin-r-3">{{app.approvalRecordOper}}</span>
                      <span>备注：{{app.approvalRecordNote}}</span>
                    </div>
                  </div>
                </el-row>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12" :offset="6">
              <el-form-item>
                <el-button type="primary" @click="addContract()">保存</el-button>
                <el-button @click="dialogFormVisible = false">取消</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <!--内层dialog-->
        <el-dialog width="30%" title="全部客户" :visible.sync="innerDialog" append-to-body>
          <!--选择客户-->
          <el-table :data="customerList" style="width: 100%">
            <el-table-column prop="customerId" label="客户编号" >
            </el-table-column>
            <el-table-column prop="customerName" label="客户名" >
            </el-table-column>
            <el-table-column label="请选择" >
              <template slot-scope="scope">
                <el-button size="mini" @click="choiceCustomer(scope.row)" icon="el-icon-check" type="primary" circle style="margin-left: 10px"></el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-row style="margin-top:10px">
            <el-col :span="16">
              <el-pagination layout="prev, pager, next, jumper" :total="cusTotalSize" @current-change="cusChangePage"
                             :current-page.sync="cusCurrPage" :page-size="cusPageSize"></el-pagination>
            </el-col>
          </el-row>
        </el-dialog>
        <!--内层dialog员工-->
        <el-dialog width="30%" title="人员选择" :visible.sync="innerDialogEmp" append-to-body @close="closeInnerDialogEmp">
          <div>
            <el-collapse v-model="activeName">
              <el-collapse-item v-for ="(dept,index) in deptList" :title="dept.deptName" :key="index" :name="dept.deptId">
                <ul class="emp-ul">
                  <li @click="choiceEmp(emp)" v-for="(emp,index) in dept.employeeByDeptId">
                    <span v-if="index !== dept.employeeByDeptId.length-1" class="line-style"></span>
                    <span v-if="index === dept.employeeByDeptId.length-1" class="line-style-end"></span>
                    <span class="">{{emp.empName}}</span>
                  </li>
                </ul>
              </el-collapse-item>
            </el-collapse>
          </div>
        </el-dialog>
      </el-dialog>
      <!--复制合同订单dialog-->
      <el-dialog title="复制合同订单" :visible.sync="dialogCopy"
                 @close="closeDialogCopy" width="60%" style="color: #333333"  >
        <el-form :model="copyForm" label-width="100px">
          <el-divider><span class="font-14-bold"></span></el-divider>
          <el-row>
            <el-col>
              <el-form-item label="1.确定源合同订单:" label-width="200px">
                <el-radio-group v-model="copyForm.copyIdType">
                  <el-radio :label="1">ID</el-radio>
                  <el-radio :label="2">合同订单号</el-radio>
                </el-radio-group>
                <br/>
                <el-input v-model="copyForm.copyNo" style="width: 79%"></el-input>
              </el-form-item>

            </el-col>
          </el-row>
          <el-row>
            <el-col>
              <el-form-item label="2.复制到客户:" label-width="200px">
                <el-input :disabled="true" v-model="copyForm.customer.customerName" style="width: 91%"></el-input>
              </el-form-item>
              <div class="form-inline-copy" v-show="isCustomer">
                <el-input v-model="customerValue" clearable size="medium" placeholder="拼音.字母.关键字" style="width: 20%"></el-input>
                <el-button @click="findCustomer" size="medium" icon="el-icon-search"></el-button>
                <el-popover placement="top" v-model="visible">
                  <div style="margin-bottom: 10px">
                    <span>查询条件:{{customerValue}}</span>
                    <span @click="cleanCustomer" class="cursor" style="float: right"><i class="el-icon-error"></i></span>
                  </div>
                  <ul class="cu-ul" v-if="customerList2 !== ''">
                    <li @click="choiceCustomer2(item)" v-for="item in customerList2">{{item.customerName}}</li>
                  </ul>
                  <div style="margin: 5px 0;text-align: center" v-if="customerList2 == ''">
                    <i class="el-icon-warning-outline"/>没有符合条件的客户！
                  </div>
                </el-popover>
                <el-tooltip class="item" effect="dark" content="浏览选择客户" placement="bottom">
                  <el-button @click="innerVisible(cusCurrPage,cusPageSize)" size="medium" icon="el-icon-s-operation"></el-button>
                </el-tooltip>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12" :offset="7">
              <el-form-item>
                <el-button @click="copyContractTips" type="primary">确认</el-button>
                <el-button @click="dialogCopy = false">取消</el-button>
              </el-form-item>
            </el-col>
          </el-row>
          <!--内层dialog-->
          <el-dialog width="30%" title="客户选择" :visible.sync="innerDialog" append-to-body>
            <!--选择客户-->
            <el-table :data="customerList" style="width: 100%">
              <el-table-column prop="customerId" label="客户编号" >
              </el-table-column>
              <el-table-column prop="customerName" label="客户名" >
              </el-table-column>
              <el-table-column label="请选择" >
                <template slot-scope="scope">
                  <el-button size="mini" @click="choiceCustomer(scope.row)" icon="el-icon-check" type="primary" circle style="margin-left: 10px"></el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-row style="margin-top:10px">
              <el-col :span="16">
                <el-pagination layout="prev, pager, next, jumper" :total="cusTotalSize" @current-change="cusChangePage"
                               :current-page.sync="cusCurrPage" :page-size="cusPageSize"></el-pagination>
              </el-col>
            </el-row>
          </el-dialog>
        </el-form>
      </el-dialog>
    </el-row>
    <!--合同订单表格-->
    <el-table ref="multipleTable" :data="contractList" tooltip-effect="dark"
              style="width: 100%"  @selection-change="handleSelectionChange" border id="outTable">
      <el-table-column type="selection" ></el-table-column>
      <el-table-column prop="contractId" label="ID" wsortable sortable></el-table-column>
      <el-table-column prop="contractTheme" label="主题">
        <template slot-scope="scope">
          <router-link :to="{path:'/contractview',query: {contractId: scope.row.contractId}}">
            <div style="color: #333333" >
              <i class="el-icon-caret-right"></i>
              <span >{{scope.row.contractTheme}}</span>
            </div>
          </router-link>
        </template>
      </el-table-column>
      <el-table-column prop="customerByCustomerId.customerName" label="对应客户" >
        <template slot-scope="scope">
          <div style="color: #333333">
            <span>{{scope.row.customerByCustomerId.customerName}}</span>
            <el-tooltip class="item" effect="dark" content="打开详细页面" placement="bottom">
              <router-link :to="{path:'/CustomerView',query: {customerId: scope.row.customerByCustomerId.customerId}}">
                  <span style="color: #333333">
                    <i class="el-icon-s-opportunity"></i>
                  </span>
              </router-link>
            </el-tooltip>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="contractTotalAmount" label="总金额" sortable></el-table-column>
      <el-table-column prop="contractBackAmount" label="回款金额" sortable></el-table-column>
      <el-table-column label="状态" >
        <template slot-scope="scope">
          <span v-if="scope.row.contractStatus == 1">{{ztOptions[0].label}}</span>
          <span v-if="scope.row.contractStatus == 2">{{ztOptions[1].label}}</span>
          <span v-if="scope.row.contractStatus == 3">{{ztOptions[2].label}}</span>
          <span v-if="scope.row.contractStatus == 4">{{ztOptions[3].label}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="employeeByEmpId.empName" label="我方签约人" ></el-table-column>
      <el-table-column label="审批" width="60">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" content="待申请" placement="bottom">
            <span class="font-18" v-if="scope.row.contractAppStatus === 0"><i class="el-icon-more"></i></span>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="待审" placement="bottom">
            <span class="font-18" v-if="scope.row.contractAppStatus === 1"><i class="el-icon-s-opportunity"></i></span>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="同意" placement="bottom">
            <span class="font-18" v-if="scope.row.contractAppStatus === 2"><i class="el-icon-circle-check"></i></span>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="否决" placement="bottom">
            <span class="font-18" v-if="scope.row.contractAppStatus === 3"><i class="el-icon-circle-close"></i></span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="" label="操作" width="135px">
        <template slot-scope="scope">
          <div v-if="scope.row.contractAppStatus !== 2">
          <router-link :to="{path:'/contractview',query: {contractId: scope.row.contractId}}">
            <el-tooltip class="item" effect="dark" content="视图" placement="bottom">
              <el-button size="mini" icon="el-icon-tickets" type="success" circle></el-button>
            </el-tooltip>
          </router-link>
          <el-tooltip class="item" effect="dark" content="编辑" placement="bottom">
            <el-button size="mini" @click="handleEdit(scope.row)" icon="el-icon-edit" type="primary" circle style="margin-left: 10px"></el-button>
          </el-tooltip>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-row style="margin-top:10px">
      <el-col :span="8">
        <el-tooltip class="item" effect="dark" content="删除" placement="bottom">
          <el-button style="padding: 12px 12px" icon="el-icon-delete" @click="handleDeleteMany" type="danger"></el-button>
        </el-tooltip>
      </el-col>
      <el-col :span="13">
        <el-pagination layout="sizes,prev,pager, next, jumper" :total="totalSize" @current-change="changePage"
                       :current-page.sync="currPage" :page-size="pageSize" :page-sizes="pageSizes" @size-change="changeSize"></el-pagination>
      </el-col>
      <!--导出表格-->
      <el-col :span="3">
        <el-tooltip class="item" effect="dark" content="打印列表" placement="bottom">
          <el-button @click="handleWindowPrint('#outTable', '列表打印')" style="padding: 12px 12px" type="info" plain  icon="el-icon-printer"></el-button>
        </el-tooltip>
        <el-tooltip class="item" effect="dark" content="批量导出Excel格式数据" placement="bottom">
          <el-button @click="batchExportExcel" style="padding: 12px 12px" type="info" plain  icon="el-icon-document-copy"></el-button>
        </el-tooltip>
        <el-tooltip class="item" effect="dark" content="导出Excel格式数据" placement="bottom">
          <el-button @click="exportExcel" style="padding: 12px 12px" type="info" plain  icon="el-icon-document-remove"></el-button>
        </el-tooltip>
      </el-col>
    </el-row>
    <!-- 统计-->
    <el-row>
      <el-col :span="8">
        <div class="font-14-bold" style="margin: 30px 0 0 30px">分布</div>
        <div style="width: 400px;height:400px;margin: 20px auto 0px" ref="disChart"></div>
        <div style="margin-left: 30px">
          <el-select v-model="tbValue" @change="findType(tbValue)" placeholder="合同订单类型分布" style="width: 350px">
            <el-option v-for="item in tbOptions" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="font-14-bold" style="margin: 30px 0 0 30px">Top</div>
        <div style="width: 400px;height:400px;margin: 20px auto 0px" ref="dateChart"></div>
        <div style="margin-left: 30px">
          <el-select v-model="sjValue" @change="findDate(sjValue)" placeholder="合同订单签约时间统计" style="width: 350px">
            <el-option v-for="item in sjOptions" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="font-14-bold" style="margin: 30px 0 0 30px">工具</div>
        <div style="width: 400px;height:400px;margin: 20px auto 0px" ref="lineChart"></div>
        <div style="margin-left: 30px">
          <el-select v-model="stValue" @change="findStatus(stValue)" placeholder="合同订单执行状态统计" style="width: 350px">
            <el-option v-for="item in stOptions" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import {formatTimeToStr} from "../assets/format";
  import XLSX from "xlsx";
  import FileSaver from "file-saver";

  export default {
  data () {
    return {
      dialogCopy:false,
      detailList: [], // 明细集合
      emp:{},
      changeEmp:true, // 是否可以改变负责人
      activeName: [],
      deptList:[],
      dialogFormVisible: false,
      pageSize: 10, // 分页页大小
      pageSizes:[10,20,30],//页大小数组
      opportunityList: [],// 销售机会集合
      contractList:[],//合同订单视图集合分页
      customerList: [], // 员工客户名称
      contactList: [], // 员工联系人集合
      pageSize: 10, // 分页页大小
      currPage: 1, // 当前页码，默认为1
      totalSize: 0, // 总记录数
      cusPageSize: 2, // 分页页大小
      cusCurrPage: 1, // 当前页码，默认为1
      cusTotalSize: 0, // 总记录数
      restaurants: [],
      state: '',
      timeout:  null,
      contract: {
        contractId: 0,//合同id
        contractTheme: '', //主题
        opportunityByOppId:'',//销售机会
        customerByCustomerId: '',//对应客户
        employeeByEmpId:'',//所有者
        contractChance:'',//对应机会
        contractNo:'',  //合同订单号
        contractSort:'',//分类
        contractTotalAmount:0,  //总金额
        contractPaymentMethods:'', //付款方式
        contractStartTime:'',  //下单时间
        contractEndTime:'', //结束时间
        contractCustomerSigner:'',//客户签约人
        contractOurSigner:'', //我方签约人
        // contractEmpName:'',  //所有者
        contractBackAmount:0,//已回款金额
        contractInvoiceAmount:0,//已开票金额
        contractMoneyMethods:'',  //结款方式
        contractStatus: '', //状态
        contractBodyText:'',  //合同正文及附件
        contractNote:'',//备注
        contractAppStatus: 0,
        employeeByAppEmpId:null
      },
      approvalRecordList:[],// 审批记录集合
      isCustomer: true, // 客户搜索显示
      innerDialog: false,// 内层dialog客户
      innerDialogEmp: false,// 内层dialog员工
      content: '',// input内容
      customerValue:'',// 模糊查询客户
      customerList2:[],// 模糊查询结果
      visible: false,// 模糊搜索结果
      // 表单验证
      rules: {
        opportunityByOppId : [
          { required: true, message: '请选择机会', trigger: 'change' }
        ],
        'employeeByEmpId.empName': [
          { required: true, message: '请选择负责人', trigger: 'blur' }
        ],
        'customerByCustomerId.customerName': [
          { required: true, message: ' ', trigger: 'blur' }
        ],
        contractCustomerSigner: [
          { required: true, message: '请选择客户签约人', trigger: 'change' }
        ],
        contractEndTime: [
          {  required: true, message: '请选择日期', trigger: 'change'  }
        ]
      },
      /*下拉框条件查询*/
      filterOptions: [{
        label: '',
        options: [{
          value: 0,
          label: '全部数据',
          num:0
        }]
      }, {
        label: '状态',
        options: [{
          value: 1,
          label: '未生效',
          num:1
        },{
          value: 2,
          label: '执行中',
          num:2
        }, {
          value: 3,
          label: '结束',
          num:3
        }, {
          value: 4,
          label: '意外终止',
          num:4
        }, {
          value: 5,
          label: '无退货',
          num:5
        }, {
          value: 6,
          label: '有退货',
          num:6
        }]
      },  {
        label: '时间',
        options: [{
          value: 7,
          label: '30天内到期的合同订单',
          num:1
        }, {
          value: 8,
          label: '已到期的合同订单',
          num:2
        }, {
          value: 9,
          label: '本月签署的合同订单',
          num:3
        },{
          value: 10,
          label: '本年签署的合同订单',
          num:4
        }]
      }, {
        label: '类型',
        options: [{
          value: 11,
          label: '产品销售',
          num:1
        }, {
          value: 12,
          label: '服务',
          num:2
        }, {
          value: 13,
          label: '业务合作',
          num:3
        },{
          value: 14,
          label: '代理分销',
          num:4
        },{
          value: 15,
          label: '其他',
          num:5
        }]
      }],
      allValue:'',
      //头部搜索框
      filterValue: {value:0,label: '全部数据',num:0},
      vagueOptions: [{
        value: 1,
        label: '合同主题'
      }, {
        value: 2,
        label: '客户名称'
      }],
      vagueValue: 1,
      jhValue: '',
      ztOptions: [{
        value: 1,
        label: '未生效'
      },{
        value: 2,
        label: '执行中'
      }, {
        value: 3,
        label: '结束'
      }, {
        value: 4,
        label: '意外终止'
      }],
      //产品分页
      currentPage1: 5,
      //导航搜索
      activeIndex: '1',
      /*弹出框的分类*/
      lxOptions: [{
        value: 1,
        label: '产品销售'
      }, {
        value: 2,
        label: '服务'
      }, {
        value: 3,
        label: '业务合作'
      }, {
        value: 4,
        label: '代理分销'
      }, {
        value: 5,
        label: '其他'
      }],
      //分类下拉框值
      sortvalue:'',
      /*弹出框的付款方式*/
      pays: [{
        value: 1,
        label: '微信'
      }, {
        value: 2,
        label: '支付宝'
      }, {
        value: 3,
        label: '现金'
      }, {
        value: 4,
        label: '网上银行'
      }, {
        value: 5,
        label: '其他'
      }],
      //付款方式下拉框值
      payvalue:'',
      /*弹出框的付款方式*/
      paytimes: [{
        value: 1,
        label: '现款现结'
      }, {
        value: 2,
        label: '货到付款'
      }, {
        value: 3,
        label: '先款后货'
      }, {
        value: 4,
        label: '账期收款'
      }, {
        value: 5,
        label: '月结'
      },{
        value: 6,
        label: '季结'
      },{
        value: 7,
        label: '年结'
      }],
      radio: 1,
      //有关图
      tbOptions: [{
        value: 1,
        label: '合同订单类型分布'
      }, {
        value: 2,
        label: '合同订单付款方式分布'
      }],
      tbValue: 1,
      disList:[],
      disListDates: [],
      disListJson: [],
      sjOptions: [{
        value: 1,
        label: '合同订单签约时间统计'
      },{
        value: 2,
        label: '合同订单结束时间统计'
      }],
      sjValue: 1,
      dateList: [],
      dateListDates: [],
      dateListNum: [],
      stOptions: [{
        value: 1,
        label: '合同订单执行状态统计'
      }, {
        value: 2,
        label: '暂无'
      }],
      stValue: 1,
      lineList: [],
      lineListDates: [],
      lineListNum: [],
      lineListJson:[],
      selectList:[],
      //自适应文本域
      textarea1:'',
      textarea2:'',
      ProductForm:false,//添加产品的弹框判断
      // 客户签约人(要从数据库里面查找)
      restaurants: [],
      state: '',
      timeout:  null,
      productdetails:{
        id:0,
        product_remarks:'',//备注
        product_unit:'',//单位
        product_name:'',//产品名称
        product_model:'',//产品型号
        product_count:0,//产品数量
        product_price:0.00,//产品单价
        product_money:0.00,//产品金额
        product_total:0.00//总计(总金额)
      },
      copyForm:{
        copyIdType:1,
        copyNo:'',
        customer:''
      }
    }
  },
  methods: {
    // 导出PDF
    printPdf(val){
      this.$router.push({path: '/printcontract', query: {contractId: val}});
    },
    // pdf打印
    handleWindowPrint (ele, fileName) {
      // 去除页面不必要的 head 标签内  内容， 避免影响打印页 ， title 为保存为 pdf 的文件时的 文件名
      document.head.innerHTML = '<meta charset="utf-8">\n' +
        ' <title> ' + fileName + '</title>\n' +
        ' <meta name="format-detection" content="telephone=no">\n' +
        ' <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">\n' +
        ' <meta name="viewport" content="width=device-width,initial-scale=1.0">\n' +
        ' <link rel="stylesheet" href="./static/css/contract.css"/>'
      document.body.innerHTML = document.querySelector(ele).outerHTML
      // 转异步 等待dom元素渲染（样式）完毕在打印
      setTimeout(() => {
        // 打印
        window.print()
        // 刷新页面
        window.location.reload()
      }, 20)
    },
    //批量导出excel batchList
    batchExportExcel(){
      this.mulSelection.forEach((item,i)=>{
        this.$set(item,'contractId',item.contractId);
        this.$set(item,'contractTheme',item.contractTheme);
        this.$set(item,'customerName',item.customerByCustomerId.customerName);
        this.$set(item,'contractTotalAmount','￥'+item.contractTotalAmount);
        this.$set(item,'contractBackAmount:0,','￥'+item.contractBackAmount);
        if (item.contractStatus !== null){
          this.$set(item,'contractStatus',this.ztOptions[item.contractStatus - 1].label);
        }
        this.$set(item,'empName',item.employeeByEmpId.empName);
        if (item.contractAppStatus === 0){
          this.$set(item,'contractAppStatus','待申请');
        }else if(item.contractAppStatus === 1){
          this.$set(item,'contractAppStatus','待审批');
        }else if(item.contractAppStatus === 2){
          this.$set(item,'contractAppStatus','同意');
        }else if(item.contractAppStatus === 3){
          this.$set(item,'contractAppStatus','否决');
        }
        this.selectList.splice(i,0,item);
      })
      //excel数据导出
      require.ensure([], () => {
        const {
          export_json_to_excel
        } = require('../js/Export2Excel');
        const tHeader = ['ID','主题','对应客户','总金额','回款金额','状态','所有者', '审批','备注'];
        const filterVal = ['contractId','contractTheme','customerName','contractTotalAmount','contractBackAmount','contractStatus','empName',
          'contractAppStatus'];
        const list = this.selectList;
        const data = this.formatJson(filterVal, list);
        export_json_to_excel(tHeader, data, '合同订单批量导出');
      })
      this.initData(this.currPage, this.pageSize,this.filterValue,this.vagueValue,this.content)
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]))
    },
    //导出excel
    exportExcel () {
      var xlsxParam = { raw: true };//转换成excel时，使用原始的格式
      var wb = XLSX.utils.table_to_book(document.querySelector("#outTable"),xlsxParam);
      var wbout = XLSX.write(wb, {
        bookType: "xlsx",
        bookSST: true,
        type: "array"
      });
      try {
        FileSaver.saveAs(
          new Blob([wbout], { type: "application/octet-stream;charset=utf-8" }),
          "合同订单导出.xlsx"
        );
      } catch (e) {
        if (typeof console !== "undefined") console.log(e, wbout);
      }
      return wbout;
    },
    // 查询当前员工
    loginEmp(){
      this.$axios.get('http://localhost:8088/emp')
        .then(v => {
          this.emp = v.data
        })
        .catch(function (v) {})
    },
    // 分页查询所有
  /*  initData (currPage, pageSize) {
      this.$axios.get('http://localhost:8088/emp-contract-list', {
        params: {
          page: currPage,
          size: pageSize,
        }
      })
        .then(v => {
          this.contractList = v.data.rows
          this.totalSize = v.data.total
          console.log(this.contractList)
        })
        .catch(function (v) {})
    },*/
    initData (currPage, pageSize,filter,vague,content) {
      this.$axios.get('http://localhost:8088/emp-contract-list', {
        params: {
          page: currPage,
          size: pageSize,
          value:filter.value,
          num:filter.num,
          vague:vague,
          content:content
        }
      })
        .then(v => {
          this.contractList = v.data.rows
          this.totalSize = v.data.total
        })
        .catch(function (v) {})
    },
    //关闭复制报价单dialog事件
    closeDialogCopy(){
      this.copyForm = {
        copyIdType:1,
        copyNo:'',
        customer:''
      }
      this.contract = {
        contractId: 0,//合同id
        contractTheme: '', //主题
        opportunityByOppId:'',//销售机会
        customerByCustomerId: '',//对应客户
        employeeByEmpId:'',//所有者
        contractChance:'',//对应机会
        contractNo:'',  //合同订单号
        contractSort:'',//分类
        contractTotalAmount:0,  //总金额
        contractPaymentMethods:'', //付款方式
        contractStartTime:'',  //下单时间
        contractEndTime:'', //结束时间
        contractCustomerSigner:'',//客户签约人
        contractOurSigner:'', //我方签约人
        contractBackAmount:0,//已回款金额
        contractInvoiceAmount:0,//已开票金额
        contractMoneyMethods:'',  //结款方式
        contractStatus: '', //状态
        contractBodyText:'',  //合同正文及附件
        contractNote:'',//备注
        contractAppStatus: 0,
        employeeByAppEmpId:null
      }
      this.detailList = []
    },
    // 失去焦点关闭模糊搜索框
    cleanCustomer() {
      this.visible = false
      this.customerValue = ''
    },
    // 复制合同订单判断
    copyContractTips () {
      if (this.copyForm.customer === ''){
        this.$message({
          message: '客户不能为空',
        });
      }else if (this.copyForm.copyNo === '') {
        this.$message({
          message: '合同订单不能为空',
        })
      }else if (this.copyForm.copyIdType === 1){
        if (/^[0-9]{1,20}$/.exec(this.copyForm.copyNo)){
          this.findContractById()
          console.log("是数字")
        }else {
          this.dialogCopy = false
          this.$message({
            message: 'id错误',
          })
        }}else if (this.copyForm.copyIdType === 2) {
        this.findContractByNo()
      }
    },
    //查询合同订单根据ID
    findContractById(){
      this.$axios.get('http://localhost:8088/emp-con-id', {
        params: {
          conId: this.copyForm.copyNo
        }
      })
        .then(v => {
          if (v.data.length === 0){
            this.dialogCopy = false
            this.$message({
              message: '数据不存在',
            })
          }else {
            this.contract = v.data
            this.findDetailByCopy(this.contract.contractId)
            this.contract.contractId = 0
            this.contract.contractAppStatus = 0
            this.contract.contractStartTime = this.addDate()
            this.contract.contractStatus = 1
            this.contract.customerByCustomerId = this.copyForm.customer
            this.contract.employeeByAppEmpId = null
            this.contract.employeeByEmpId = this.emp
            this.contract.opportunityByOppId = null
            this.contract.contractNo = this.contractNo()
          }
        })
        .catch(function (v) {
        })
    },
    //查询报价单根据报价单号
    findContractByNo(){
      this.$axios.get('http://localhost:8088/con-no', {
        params: {
          conNo: this.copyForm.copyNo
        }
      })
        .then(v => {
          if (v.data.length === 0){
            this.dialogCopy = false
            this.$message({
              message: '数据不存在',
            })
          }else {
            this.contract = v.data
            this.findDetailByCopy(this.contract.contractId)
            this.contract.contractId = 0
            this.contract.contractAppStatus = 0
            this.contract.contractStatus = 1
            this.contract.contractStartTime = this.addDate()
            this.contract.customerByCustomerId = this.copyForm.customer
            this.contract.employeeByAppEmpId = null
            this.contract.employeeByEmpId = this.emp
            this.contract.opportunityByOppId = null
            this.contract.contractNo = this.contractNo()
          }
        })
        .catch(function (v) {
        })
    },
    // 复制合同订单查询所有详单
    findDetailByCopy(conId) {
      this.$axios.get('http://localhost:8088/con-detail-list', {
        params: {
          conId: conId
        }
      })
        .then(v => {
          this.detailList = v.data
          this.copyContract()
        })
        .catch(function (v) {
        })
    },
    //复制报价
    copyContract(){
      this.$axios.post('http://localhost:8088/save-contract',
        {
          contractId:this.contract.contractId,
          contractTheme:this.contract.contractTheme,
          contractChance:this.contract.contractChance,
          contractNo:this.contract.contractNo,
          contractSort:this.contract.contractSort,
          contractTotalAmount:this.contract.contractTotalAmount,
          contractPaymentMethods:this.contract.contractPaymentMethods,
          contractStartTime:this.contract.contractStartTime,
          contractEndTime:this.contract.contractEndTime,
          contractCustomerSigner:this.contract.contractCustomerSigner,
          contractOurSigner:this.contract.contractOurSigner,
          contractEmpName:this.contract.contractEmpName,
          contractBackAmount:this.contract.contractBackAmount,
          contractMoneyMethods:this.contract.contractMoneyMethods,
          contractStatus:this.contract.contractStatus,
          contractBodyText:this.contract.contractBodyText,
          contractNote:this.contract.contractNote,
          contractByContractId:this.contract.contractByContractId,
          contractAppStatus: this.contract.contractAppStatus,
          employeeByAppEmpId: this.contract.employeeByAppEmpId,
          customerByCustomerId:this.contract.customerByCustomerId,
          opportunity: this.contract.opportunityByOppId,
          employeeByEmpId:this.contract.employeeByEmpId,
          details:this.detailList
        })
        .then(v => {
          // 1、刷新数据
          this.initData(this.pageSize, this.pageSize,this.filterValue,this.vagueValue,this.content)
          this.dialogCopy = false
          this.$message({
            message: '复制成功',
            type: 'success'
          });
        })
        .catch(function (v) {
        })
    },
    //打开员工dialog
    openEmpDialog(){
      this.innerDialogEmp = true
      this.findDeptList()
    },
    //查询部门员工
    findDeptList () {
      this.$axios.get('http://localhost:8088/dept-emp-list')
        .then(v => {
          this.deptList = v.data
          for(let i = 1;i <= this.deptList.length;i++){
            this.activeName.push(i)
          }
        })
        .catch(function (v) {})
    },
    //关闭员工diglog事件
    closeInnerDialogEmp(){
      this.activeName = []
    },
    // 点击编辑详单跳转到合同订单视图
    openPro(contractId){
      this.$router.push({path:'/contractview',query: {contractId: contractId}});
    },
    // 分类查询
    findContract(val){
      if(val.value == 0){
        this.initData(this.currPage, this.pageSize)
      }
      if (val.parentLabel == '状态'){
        this.$axios.get('http://localhost:8088/emp-contract-status-list', {
          params: {
            page: this.currPage,
            size: this.pageSize,
            contractStatus: val.value
          }
        })
          .then(v => {
            console.log(v.data.rows)
            this.contractList = v.data.rows
            this.totalSize = v.data.total
          })
          .catch(function (v) {})
      }
      if (val.parentLabel == '未结束'){
        this.$axios.get('http://localhost:8088/emp-contract-unfinish-list', {
          params: {
            page: this.currPage,
            size: this.pageSize,
            contractNow: val.value
          }
        })
          .then(v => {
            console.log(v.data.rows)
            this.contractList = v.data.rows
            this.totalSize = v.data.total
          })
          .catch(function (v) {})
      }
      if (val.parentLabel == '时间'){
        this.$axios.get('http://localhost:8088/emp-contract-time-list', {
          params: {
            page: this.currPage,
            size: this.pageSize,
            contractTime: val.value
          }
        })
          .then(v => {
            console.log(v.data.rows)
            this.contractList = v.data.rows
            this.totalSize = v.data.total
          })
          .catch(function (v) {})
      }

      if (val.parentLabel == '类型'){
        this.$axios.get('http://localhost:8088/emp-contract-classify-list', {
          params: {
            page: this.currPage,
            size: this.pageSize,
            contractSort: val.value
          }
        })
          .then(v => {
            console.log(v.data.rows)
            this.contractList = v.data.rows
            this.totalSize = v.data.total
          })
          .catch(function (v) {})
      }
    },
    // 查询客户所有机会
    opportunityData(cusId) {
      this.$axios.get('http://localhost:8088/cus-opp-list-all', {
        params: {
          cusId: cusId
        }
      })
        .then(v => {
          this.opportunityList = v.data
        })
        .catch(function (v) {
        })
    },
    // 查询机会主题或客户
    findThemeOrClient(){
      if (this.content == ''){
        this.initData(this.currPage, this.pageSize)
      }
      if (this.jhValue == 2){
        this.$axios.get('http://localhost:8088/emp-contract-customer-list', {
          params: {
            page: this.currPage,
            size: this.pageSize,
            customerName: this.content
          }
        })
          .then(v => {
            console.log(v.data.rows)
            this.contractList = v.data.rows
            this.totalSize = v.data.total
          })
          .catch(function (v) {})
      }else {
        this.$axios.get('http://localhost:8088/emp-contract-theme', {
          params: {
            page: this.currPage,
            size: this.pageSize,
            contractTheme: this.content
          }
        })
          .then(v => {
            console.log(v.data.rows)
            this.contractList = v.data.rows
            this.totalSize = v.data.total
          })
          .catch(function (v) {})
      }
    },
    // 合同订单表格分页
   /* changePage (val) {
      // val就是当前页码
        this.initData(val, this.pageSize)
    },*/
    changePage (val) {
      this.initData(val,this.pageSize,this.filterValue,this.vagueValue,this.content)
    },
    //改变页大小
    changeSize(val){
      this.pageSize = val
      this.currPage = 1
      this.initData(this.currPage,this.pageSize,this.filterValue,this.vagueValue,this.content)
    },
    // 查询合同订单审批记录集合
    findAppRecord(conId) {
      this.$axios.get('http://localhost:8088/app-record-con-list', {
        params: {
          conId: conId
        }
      })
        .then(v => {
          this.approvalRecordList = v.data
          console.log('审批记录集合')
          console.log(this.approvalRecordList)
        })
        .catch(function (v) {
        })
    },
    //新增、修改
    addContract(){
      // 状态
      this.contract.contractStatus = this.radio
      this.contract.contractStartTime = this.addDate()
      if(this.contract.contractId == 0){
        this.contract.contractNo = this.contractNo()
      }
      this.$refs.con.validate((valid) => {
        if (valid) {
          this.$axios.post('http://localhost:8088/save-contract',
            {
              contractId:this.contract.contractId,
              contractTheme:this.contract.contractTheme,
              contractChance:this.contract.contractChance,
              contractNo:this.contract.contractNo,
              contractSort:this.contract.contractSort,
              contractTotalAmount:this.contract.contractTotalAmount,
              contractPaymentMethods:this.contract.contractPaymentMethods,
              contractStartTime:this.contract.contractStartTime,
              contractEndTime:this.contract.contractEndTime,
              contractCustomerSigner:this.contract.contractCustomerSigner,
              contractOurSigner:this.contract.contractOurSigner,
              contractEmpName:this.contract.contractEmpName,
              contractBackAmount:this.contract.contractBackAmount,
              contractMoneyMethods:this.contract.contractMoneyMethods,
              contractStatus:this.contract.contractStatus,
              contractBodyText:this.contract.contractBodyText,
              contractNote:this.contract.contractNote,
              contractByContractId:this.contract.contractByContractId,
              contractAppStatus: this.contract.contractAppStatus,
              employeeByAppEmpId: this.contract.employeeByAppEmpId,
              customerByCustomerId:this.contract.customerByCustomerId,
              opportunity: this.contract.opportunityByOppId,
              employeeByEmpId:this.contract.employeeByEmpId,
              details:this.detailList
          })
            .then(v => {
              // 1、刷新数据
              this.dialogFormVisible = false
              this.sourceData()
              this.findDateData()
              this.statusData()
              this.initData(this.currPage,this.pageSize,this.filterValue,this.vagueValue,this.content)
              // 2、关闭弹框

              this.tbValue = 1,
              this.disList = [],
              this.disListDates =  [],
              this.disListJson =  [],
              this.sjValue =  1,
              this.dateList =  [],
              this.dateListDates =  [],
              this.dateListNum =  [],
              this.stValue =  1,
              this.lineList =  [],
              this.lineListDates =  [],
              this.lineListNum =  [],
              this.lineListJson = [],
              this.$message({
                message: '已保存',
                type: 'success'
              });
              // 3、重新初始化表单数据模型
            /*  this.contract = {
                contractId:0,
                contractTheme: '', //主题
                customerByCustomerId: '',//对应客户
                contractChance:'',//对应机会
                contractNo:'',  //合同订单号
                contractSort:'',//分类
                contractTotalAmount:0,  //总金额
                contractPaymentMethods:'', //付款方式
                contractStartTime:'',  //下单时间
                contractEndTime:'', //结束时间
                contractCustomerSigner:'',//客户签约人
                contractOurSigner:'', //我方签约人
                contractEmpName:'',  //所有者
                contractBackAmount:0,//回款金额
                contractMoneyMethods:'',  //结款方式
                contractStatus: '', //状态
                contractBodyText:'',  //合同正文及附件
                contractNote:'',//备注
                employeeByEmpId: '',
                customerByCustomerId: ''*/
            })
            .catch(function (v) {})
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    // 修改数据回显
    handleEdit(val) {
      this.dialogFormVisible = true
      this.radio = val.contractStatus
      this.contract.contractId = val.contractId
      this.contract.contractTheme = val.contractTheme
      this.contract.contractChance = val.contractChance
      this.contract.contractNo = val.contractNo
      this.contract.contractSort = val.contractSort
      this.contract.contractTotalAmount = val.contractTotalAmount
      this.contract.contractPaymentMethods = val.contractPaymentMethods
      this.contract.contractStartTime = val.contractStartTime
      this.contract.contractEndTime = val.contractEndTime
      this.contract.contractCustomerSigner = val.contractCustomerSigner
      this.contract.contractOurSigner = val.contractOurSigner
      this.contract.contractEmpName = val.contractEmpName
      this.contract.contractBackAmount = val.contractBackAmount
      this.contract.contractMoneyMethods = val.contractMoneyMethods
      this.contract.contractStatus = val.contractStatus
      this.contract.contractBodyText = val.contractBodyText
      this.contract.contractNote = val.contractNote
      this.contract.customerByCustomerId = val.customerByCustomerId
      this.contract.opportunityByOppId = val.opportunityByOppId
      this.contract.contractAppStatus = val.contractAppStatus
      this.contract.employeeByAppEmpId = val.employeeByAppEmpId
      this.contract.employeeByEmpId = val.employeeByEmpId
      this.choiceContact(val.customerByCustomerId.customerId)
      this.findDetail(val.contractId)
      this.opportunityData(val.customerByCustomerId.customerId)
      this.findAppRecord(val.contractId)
      this.isCustomer = false
    },
    // 查询所有详单
    findDetail(conId){
      this.$axios.get('http://localhost:8088/con-detail-list', {
        params:{
          conId : conId
        }
      })
        .then(v => {
          this.detailList = v.data
        })
        .catch(function (v) {})
    },
    // 打开dialog事件
    openDialog () {
      if(this.contract.contractId === 0){
        this.contract.employeeByEmpId = this.emp
        this.contract.contractStartTime = this.addDate()
        this.contract.contractStatus = 1
      }
    },
    // 关闭dialog事件
    closeDialog () {
      this.$refs.con.resetFields()
      this.contract = {
        contractId:0,
        contractTheme: '', //主题
        customerByCustomerId: '',//对应客户
        contractChance:'',//对应机会
        contractNo:'',  //合同订单号
        contractSort:'',//分类
        contractTotalAmount:0,  //总金额
        contractPaymentMethods:'', //付款方式
        contractStartTime:'',  //下单时间
        contractEndTime:'', //结束时间
        contractCustomerSigner:'',//客户签约人
        contractOurSigner:'', //我方签约人
        contractEmpName:'',  //所有者
        contractBackAmount:0,//回款金额
        contractMoneyMethods:'',  //结款方式
        contractStatus: '', //状态
        contractBodyText:'',  //合同正文及附件
        contractNote:'',//备注
        employeeByEmpId: '',
        opportunityByOppId: '',
        customerByCustomerId: '',
        contractAppStatus: 0,
        employeeByAppEmpId:null
      }
      this.isCustomer = true
      this.approvalRecordList = []
      this.detailList = []
      this.contactList = []
      this.opportunityList = []
    },
    // 打开内层dialog
    innerVisible (cusCurrPage,cusPageSize) {
      this.$axios.get('http://localhost:8088/emp-customer-list', {
        params: {
          page: cusCurrPage,
          size: cusPageSize,
        }
      })
        .then(v => {
          this.customerList = v.data.rows
          this.cusTotalSize = v.data.total
        })
        .catch(function (v) {})
      this.innerDialog = true
    },
    // 合同订单号
    contractNo() {
      var contractNo = "HTCY";
      for (var i = 0; i < 5; i++) //j位随机数，用以加在时间戳后面。
      {
        contractNo += Math.floor(Math.random() * 10);
      }
      contractNo = contractNo+this.addDate();
      return contractNo;
    },
  // 获取当前日期
    addDate () {
      var date = new Date();
      var seperator1 = "-";
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var strDate = date.getDate();
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
      }
      var currentdate = year + seperator1 + month + seperator1 + strDate;
      return currentdate;
    },
    //客户分页
    cusChangePage (val) {
      // val就是当前页码
      this.innerVisible(val, this.cusPageSize)
    },
    // 选择客户
    choiceCustomer(val){
      if (this.dialogFormVisible === true){
      this.contract.customerByCustomerId = val
      this.contract.opportunityByOppId = ''
      console.log(this.contract.customerByCustomerId)
      this.choiceContact(val.customerId)
      this.opportunityData(val.customerId)
    }else if(this.dialogCopy === true){
        this.copyForm.customer = val
      }
      this.innerDialog = false;
    },
    // 模糊查询客户
    findCustomer(){
      if (this.customerValue != ''){
        this.visible = true
        this.$axios.get('http://localhost:8088/emp-fuzzy-customer-list', {
          params: {
            customerName: this.customerValue
          }
        })
          .then(v => {
            this.customerList2 = v.data
          })
          .catch(function (v) {})
      }else {
        this.visible = false
      }
    },
    // 模糊选择客户
    choiceCustomer2(val){
      console.log(val)
      this.contract.customerByCustomerId = val
      this.choiceContact(val.customerId)
      this.opportunityData(val.customerId)
      this.visible = false
    },
    // 失去焦点关闭模糊搜索框
    closeEmp(){
      this.visible = false
      this.customerValue = ''
    },
    // 选择联系人
    choiceContact(customerId){
      this.$axios.get('http://localhost:8088/contact-list', {
        params: {
          customerId : customerId
        }
      })
        .then(v => {
          this.contactList = v.data
        })
        .catch(function (v) {})
    },
    // 选择员工
   /* choiceEmp(val){
      this.contract.employeeByEmpId = val
      console.log(this.contract.customerByCustomerId)
      this.$axios.get('http://localhost:8088/contact-list', {
        params: {
          customerId : val.customerId
        }
      })
        .then(v => {
          this.contactList = v.data
        })
        .catch(function (v) {})
      this.innerDialog = false;
    },*/
    choiceEmp(val) {
      this.contract.employeeByEmpId = val
      this.innerDialogEmp = false;
    },
    //删除提示
    handleDelete (val) {
      this.$confirm('此操作将永久删除销售机会, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteContract(val.contractId)
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 批量删除提示
    handleDeleteMany () {
      this.$confirm('此操作将永久删除勾选销售机会, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteAll()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 获取批量删除ID数组
    handleSelectionChange (val) {
      this.mulSelection = val
    },
    // 删除axios
    deleteContract(contractId){
      this.$axios.post('http://localhost:8088/delete-contract', this.qs.stringify({contractId: contractId}))
        .then(v => {
          // 1、刷新数据
          this.sourceData()
          this.findDateData()
          this.statusData()
          this.initData(this.currPage,this.pageSize,this.filterValue,this.vagueValue,this.content)
          // 2、关闭弹框
          this.tbValue = 1,
          this.disList = [],
          this.disListDates =  [],
          this.disListJson =  [],
          this.sjValue =  1,
          this.dateList =  [],
          this.dateListDates =  [],
          this.dateListNum =  [],
          this.stValue =  1,
          this.lineList =  [],
          this.lineListDates =  [],
          this.lineListNum =  [],
          this.lineListJson = []
        })
        .catch(function (v) {})
    },
    // 删除所有
    deleteAll () {
      this.mulSelection.forEach(row => {
        this.deleteContract(row.contractId)
      })
    },
    // 计算合同订单付款方式分布
    payStyleData () {
      this.$axios.get('http://localhost:8088/pay-style-list')
        .then(v => {
          this.disList = v.data
          //计算
          this.computePayStyle()
        })
        .catch(function (v) {})
    },
    // 合同订单类型查询
    typeData () {
      this.$axios.get('http://localhost:8088/sorts-list')
        .then(v => {
          this.disList = v.data
          //计算
          this.computeType()
        })
        .catch(function (v) {})
    },
    // 合同订单签约时间查询
    signDateData () {
      this.$axios.get('http://localhost:8088/sign-time-list')
        .then(v => {
          this.dateList = v.data
          //计算日期
          this.computeDate()
        })
        .catch(function (v) {})
    },
    // 合同订单结束时间查询
    endDateData () {
      this.$axios.get('http://localhost:8088/end-time-list')
        .then(v => {
          this.dateList = v.data
          //计算日期
          this.computeDate()
        })
        .catch(function (v) {})
    },
    statusData () {
      this.$axios.get('http://localhost:8088/con-status-list')
        .then(v => {
          this.lineList = v.data
          //计算状态
          this.computeStatus()
        })
        .catch(function (v) {})
    },
    findType (val){
      this.disListDates = []
      this.disListJson = []
      if (val == 1){
        this.typeData()
      }else if (val == 2){
        this.payStyleData()
      }
    },
    // 计算合同订单付款方式分布
    computePayStyle (){
      for(let i=0;i<this.disList.length;i++) {
        if (this.disList[i].dates == 1){
          this.disListDates.push('微信');
          this.disListJson.push({value:this.disList[i].num,name:'微信'})
        } else if (this.disList[i].dates == 2){
          this.disListDates.push('支付宝');
          this.disListJson.push({value:this.disList[i].num,name:'支付宝'})
        }else if (this.disList[i].dates == 3){
          this.disListDates.push('现金');
          this.disListJson.push({value:this.disList[i].num,name:'现金'})
        }else if (this.disList[i].dates == 4){
          this.disListDates.push('网上银行');
          this.disListJson.push({value:this.disList[i].num,name:'网上银行'})
        }else if (this.disList[i].dates == 5){
          this.disListDates.push('其他');
          this.disListJson.push({value:this.disList[i].num,name:'其他'})
        }
      }
      console.log(this.disListDates);
      console.log(this.disListJson);
    },
    // 计算合同订单类型分布
    computeType(){
      for(let i=0;i<this.disList.length;i++) {
        if (this.disList[i].dates == 1){
          this.disListDates.push('产品销售');
          this.disListJson.push({value:this.disList[i].num,name:'产品销售'})
        } else if (this.disList[i].dates == 2){
          this.disListDates.push('服务');
          this.disListJson.push({value:this.disList[i].num,name:'服务'})
        }else if (this.disList[i].dates == 3){
          this.disListDates.push('业务合作');
          this.disListJson.push({value:this.disList[i].num,name:'业务合作'})
        }else if (this.disList[i].dates == 4){
          this.disListDates.push('代理分销');
          this.disListJson.push({value:this.disList[i].num,name:'代理分销'})
        }else if(this.disList[i].dates == 5){
          this.disListDates.push('其他');
          this.disListJson.push({value:this.disList[i].num,name:'其他'})
        }
      }
      console.log(this.disListDates);
      console.log(this.disListJson);
    },
    // 分布图
    disCharts () {
      let myChart = this.$echarts.init(this.$refs.disChart)
      // 绘制图表
      myChart.setOption({
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 10,
          data: this.disListDates
        },
        series: [
          {
            name: '合同订单类型分布',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: 'center'
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: '30',
                  fontWeight: 'bold'
                }
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: this.disListJson
          }
        ]
      })
    },
    // 切换月份统计图
    findDate (val){
      this.dateList = []
      this.dateListDates = []
      this.dateListNum = []
      if (val == 1){
        this.signDateData()
      }else if (val == 2){
        this.endDateData ()
      }
    },
    // 计算合同订单时间月份
    computeDate(){
      for(let i=0;i<this.dateList.length;i++) {
        if (this.dateList[i].dates == undefined){
          this.dateListDates.push('未知');
          this.dateListNum.push(this.dateList[i].num);
        }else {
          this.dateListDates.push(this.dateList[i].dates);
          this.dateListNum.push(this.dateList[i].num);
        }
      }
      console.log(this.dateListDates);
      console.log(this.dateListNum);
    },
    // 合同订单月份图
    dateCharts (){
      let myChart = this.$echarts.init(this.$refs.dateChart)
      // 绘制图表0
      myChart.setOption({
        color: ['#3398DB'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: this.dateListDates,
            /* (function(){
               this.findDateData()
               let arr=[];
               for(let i=0;i<this.findDateList.length;i++){
                 arr.push(this.findDateList[i].dates);
               }
               return arr;
             })(),*/
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '直接访问',
            type: 'bar',
            barWidth: '60%',
            data: this.dateListNum,
          }
        ]
      })
    },
    findStatus(val){
      this.lineList = []
      this.lineListDates = []
      this.lineListNum = []
      this.lineListJson = []
      if (val == 1){
        this.statusData()
      }
    },
    // 计算状态
    computeStatus(){
      for(let i=0;i<this.lineList.length;i++) {
        if (this.lineList[i].status == 1){
          this.lineListDates.push('未生效');
          this.lineListNum.push(this.lineList[i].num);
        } else if (this.lineList[i].status == 2){
          this.lineListDates.push('执行中');
          this.lineListNum.push(this.lineList[i].num);
        } else if (this.lineList[i].status == 3){
          this.lineListDates.push('结束');
          this.lineListNum.push(this.lineList[i].num);
        }else if (this.lineList[i].status == 4){
          this.lineListDates.push('意外终止');
          this.lineListNum.push(this.lineList[i].num);
        }
      }
      console.log("计算状态")
      console.log(this.lineListDates);
      console.log(this.lineListNum);
    },
    lineCharts (){
      let myChart = this.$echarts.init(this.$refs.lineChart)
      // 绘制图表0
      myChart.setOption({
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['状态']
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.lineListDates
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: '{value}'
          }
        },
        series: [
          {
            name: '数量',
            type: 'line',
            data: this.lineListNum,
            markPoint: {
              data: [
                {type: 'max', name: '最大值'},
                {type: 'min', name: '最小值'}
              ]
            },

          }
        ]
      })
    },
    // 导航搜索
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    openView (val) {
      this.$axios.post('http://localhost:8080/#/contractview')
    },
    handleSelectionChange (val) {
      this.mulSelection = val
    },
    deleteAll () {
      this.mulSelection.forEach(row => {
        console.log(row)
        this.$axios.post('http://localhost:8080/#/contractview', this.qs.stringify(row))
      })
    },
    //客户签约人与我方签约人
    loadAll() {
      this.$axios.get("http://localhost:8088/find-all-our-singer").then(res => {
        let data2 = [];
        res.data.rows.map((item)=> {
          data2.push({
            value: item.contract.contractOurSigner,
            //重新修改后台返回来的Key名
          })
        });
        this.restaurants = data2;
      });

    },
    querySearchAsync(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;

      clearTimeout(this.timeout);
      this.timeout = setTimeout(() => {
        cb(results);
      }, 3000 * Math.random());
    },
    createStateFilter(queryString) {
      return (state) => {
        return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    },
    handleSelect(item) {
      console.log(item);
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    //查询全部有效合同订单
    findAllValid(currPage,pageSize){
      this.$axios.get('http://localhost:8088/find-valid-list', {
        params: {
          page: currPage,
          size: pageSize,
        }
      })
        .then(v => {
          this.contractList = v.data.rows
          this.totalSize = v.data.total
          console.log(this.contractList)
        })
        .catch(function (v) {})
    },
    //查询已审批合同订单
    findAllApp(currPage,pageSize){
      this.$axios.get('http://localhost:8088/find-agree-list', {
        params: {
          page: currPage,
          size: pageSize,
        }
      })
        .then(v => {
          this.contractList = v.data.rows
          this.totalSize = v.data.total
          console.log(this.contractList)
        })
        .catch(function (v) {})
    },
  //查询否决合同订单
    findAllRefuse(currPage,pageSize){
      this.$axios.get('http://localhost:8088/find-refuse-list', {
        params: {
          page: currPage,
          size: pageSize,
        }
      })
        .then(v => {
          this.contractList = v.data.rows
          this.totalSize = v.data.total
          console.log(this.contractList)
        })
        .catch(function (v) {})
    },
    querySearchAsync(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;

      clearTimeout(this.timeout);
      this.timeout = setTimeout(() => {
        cb(results);
      }, 3000 * Math.random());
    },
    createStateFilter(queryString) {
      return (state) => {
        return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    },
    handleSelect(item) {
      console.log(item);
    }
  },
  created:function(){
    this.loginEmp()
    this.typeData()
    this.signDateData()
    this.statusData()
    this.initData(this.currPage,this.pageSize,this.filterValue,this.vagueValue,this.content)
  },
  filters: {
    formatDate: function(time) {
      if(time!=null&&time!="")
      {
        var date = new Date(time);
        return formatTimeToStr(date, "yyyy-MM-dd hh:mm");
      }else{
        return "";
      }
    }
  },
  mounted() {
   /*this.loadAll();*/
  },
  updated() {
    this.disCharts()
    this.dateCharts()
    this.lineCharts()
  },
  watch:{
    disList(val){
      this.disCharts()
    },
    dateList(newVal) {
      this.dateCharts()
    },
    lineList(val){
      this.lineCharts()
    },
  }
}
</script>

<style>
  .font-14{
    font-size: 14px
  }
  .col-sm-6 {
    width: 50%;
    position: relative;
    min-height: 1px;

  }
  .text-muted {
    color: #98a6ad;
  }
  .font-13 {
    font-size: 13px !important;
  }
  .text-left{
    text-align: left;
    float: left;
  }
  .text-right {
    text-align: right;
    float: right;
  }
  .form-inline{
    position: relative;
    top: -15px;
    left: 100px;
  }
  .font-14-bold{
    color: #000000;
    font-weight: bold;
  }
  .gz-style{
    border: 1px solid #E3E3E3;
    border-radius: 4px;
    padding: 5px;
    width: 100%;
    background: #eee;
  }
</style>
